<template>
    <div class="container">
<div class="box">
    <div class="left">
        <div id="face" class="paused">
            <img src="https://b0.bdstatic.com/ugc/Upt0I2SQrL6nsT-Wazd6Iw31c94ec48d12ba992eece6de1ac32bd6.jpg@h_1280" alt="">
        </div>
        <div style="margin-left: 5px;font-family: '行书';">葡萄成熟时(陈奕迅)</div>
    </div>
    <div class="right">
        <div class="play_btn" @click="playStatus">
        <van-icon v-if="!player" name="play-circle-o" size="28"></van-icon>
        <van-icon v-else name="pause-circle-o" size="28"></van-icon>
    </div>
        <div class="list_icon" style="margin-left: 5px;">
            <van-icon name="bars" size="28"></van-icon>
        </div>
    </div>
</div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
const player = ref(false);
const toggle = ref(false);
let audio = ref(null);
const audioUrl = 'http://123.57.81.149/1.mp3';
const playStatus = ()=>{
    player.value = !player.value;
    if(!audio.value){
audio.value = new Audio(audioUrl);
audio.value.addEventListener('ended',()=>{
    player.value = false;
})
    }
    if(player.value){
        audio.value.play()
    }else{
        audio.value.pause();
    }
    togglePlay();
}
const togglePlay = () => {
toggle.value = !toggle.value;
if(toggle.value){
document.getElementById('face').classList.remove('paused');
}else{
document.getElementById('face').classList.add('paused');
}
}
</script>
<style class="less" scoped>
@keyframes rotate {
from{
    transform: rotate(0deg)
}
to{
    transform: rotate(360deg)
}
}
.container{
    width: 100%;
    height: 60px;
    background-color: #fff;
    border-top:  1px solid #ccc;
    position: fixed;
    bottom: 0;
    padding: 10px;
    box-sizing: border-box;
     .box{
        display: flex;
        justify-content: space-between;
        .left{
            display: flex;
            align-items: center;
            #face{
                animation: rotate 2s linear infinite;
            }
            #face.paused{
                animation-play-state: paused;
            }
            #face>img{
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
        }
        .right{
            display: flex;
            align-items: center;
        }
    }
}
</style>